<template>
  <div :class="{ 'vue-input': true }">
    <div class="main">
      <div class="pre"></div>
      <input class="input" :value="modelValue" @input="handleUpdate" v-bind="newAttrs" />
      <div class="suf">
        <img class="icon" @click="handleSearch" :src="imgSrc" />
      </div>
    </div>
    <!-- <ul class="suggest" v-if="modelValue && suggestOptions.length" @click="handleSelect">
            <li class="item" :class="{ active: item[labelAlias].includes(modelValue) }"
                v-for="(item, index) in suggestOptions" :key="index" :value="index"
                v-html="item[labelAlias].replace(modelValue, `<span style='color:#2f79fc;'>${modelValue}</span>`)"></li>
        </ul> -->
  </div>
</template>

<script setup lang="ts">
import { useAttrs, ref } from 'vue'
import type { ImgHTMLAttributes } from 'vue'
const attrs = useAttrs()
let newAttrs = attrs

const emits = defineEmits<{ 'update:modelValue': [string]; search: [string]; select: Array<Record<string, any>> }>()
const { modelValue } = defineProps({
  labelAlias: {
    type: String,
    default: 'label'
  },
  valueAlias: {
    type: String,
    default: 'value'
  },
  modelValue: {
    type: String,
    default: ''
  },
  suggestOptions: {
    type: Array,
    default: () => []
  }
})
const inputValue = ref('')
const imgSrc = ref<ImgHTMLAttributes['src']>(
  ''
)
const handleUpdate = (event: Event) => {
  const target = event.target as EventTarget
  inputValue.value = (target as HTMLInputElement).value
  emits('update:modelValue', inputValue.value)
}
const handleSearch = () => {
  emits('search', inputValue.value)
}
// const handleSelect = (e: Event) => {
//     const target = e.target as EventTarget
//     const value = (target as HTMLInputElement).value
//     const item = suggestOptions[Number(value)]
//     emits('select', unref(item))
//     emits('update:modelValue', '')
// }
defineOptions({
  name: 'vueInput'
})
</script>

<style lang="scss" scoped>
@import '../../config.scss';
@import '../../common.scss';

.#{$prefix}-input {
  width: 366px;
  height: 60px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50px;
  display: inline-block;
  vertical-align: middle;

  .main {
    display: flex;
    align-items: center;
    height: 100%;

    .pre {
      width: 26px;
      height: 100%;
    }

    .input {
      width: calc(100% - 114px);
      margin: 0;
      border: none;
      outline: none;
      font-weight: 400;
      font-size: 26px;
      color: #2f79fc;
      line-height: 40px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      border-radius: 50px;

      &::placeholder {
        font-weight: 400;
        font-size: 26px;
        color: #b4bfe5;
        line-height: 40px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }

    .suf {
      width: 82px;
      height: 100%;
      position: relative;

      &::before {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        height: 22px;
        width: 1px;
        background: #b4bfe5;
      }

      .icon {
        width: 22px;
        height: 22px;
        margin: 0 36px 0 24px;
        margin-top: 50%;
        transform: translateY(-22px);
      }
    }
  }

  .suggest {
    position: absolute;
    z-index: 1000;
    width: 100%;
    height: calc(100vh - 200px);
    background: #ffffff;
    box-shadow: 0px 3px 30px 0px rgba(104, 136, 176, 0.2);
    border-radius: 8px;
    padding: 0;
    overflow-y: auto;

    .item {
      width: auto;
      min-height: 71px;
      font-weight: 400;
      font-size: 28px;
      color: #293957;
      line-height: 71px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      padding: 0;
      margin: 0;
      list-style: none;
      padding: 0 30px;

      &.active {
        background: rgba(47, 121, 252, 0.1);
        font-size: 28px;
      }
    }
  }
}
</style>
